<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<title>sunny-mvc</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<jsp:include page="../../common.jsp"></jsp:include>
<jsp:include page="../../../common_easyui.jsp"></jsp:include>
<style>
.header {
	height: 39px;
	width: 100%;
	background-color: #B1D7EF;
	font-size: 12px;
	position: fixed;
}

.nav {
	float: right;
}

.nav-container {
	margin: 0px auto;
	width: 1200px;
	/*text-align: center;*/
}

.dropdown-toggle {
	z-index: 99;
}

input {
	z-index: 0;
}

.body-container {
	padding-top: 39px;
	margin: 0 auto;
	width: 1400px;
	height: 500px;
	padding-right: 200px;
	padding-left: 200px;
	/*background-color: #ff6600;*/
}

.body-container2 {
	border-top-left-radius: 30px;
	background-color: #EBF3F8;
	padding: 30px 20px 20px 20px;
}

.body-container3 {
	margin: 0 auto;
    padding: 10px 10px 10px 10px;
}

td {
	width: 310px;
	font-size: 12px;
}

.td-status {
	width: 40px;
}

#tab {
	z-index: 0;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: -5px -5px 5px #999 inset;
	box-shadow: -5px -5px 5px #999 inset;
	border-radius: 3px;
}

.tab_header tr th {
	height: 30px;
	font-size: 14px;
	font-weight: blod;
	font-family: '微软雅黑';
	text-align: center;
}

.tab_header td {
	padding-left: 2px;
}

.td-status {
    text-align: center;
}

.inp-date {
    font-size: 12px;
    width: 100px;
    height: 25px;
}

.grid_table {
    margin-top:20px;
    margin-bottom: 30px;
}

#date-div {
    padding-top: 15px;
    /*border-top: 1px solid #C0C0C0;*/
}

    .div-tab {
        padding: 10px 10px 10px 10px;
        /*-webkit-border-radius: 5px;*/
        /*-webkit-box-shadow: -5px -5px 5px #999 inset;*/
        /*box-shadow: -5px -5px 5px #999 inset;*/
        /*border-radius: 3px;*/
    }
</style>

<script>
        $(document).ready(function () {
            $(".nav-pills li").mouseover(function () {
                $(".nav-pills li").className("active");
            })

            var tab = new table_grid("#tab", "#C0C0C0", "#C0C0C0", "#FFFFFF", "#B1D7EF", "#FFFFCC");
            tab.init();
            tab.setMouseOverColor();
            
            $("input[type='checkbox']").change(function(){
            	var $o = $(this).parent().next().children("input[type='number']");
            	
            	if($(this)[0].checked == true) {
            	    $o.attr("disabled", false);   	
            	}else {
            	    $o.attr("disabled", true);	
            	}

            })
                
        })
        
        function enableInput(index){
        	
        }
    </script>
</head>
<body>
	<div class="header">
		<div class="nav-container">
			<ul class="nav nav-pills">
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 项目 <span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">Swing</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
					</ul></li>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 报表 <span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">Swing</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
					</ul></li>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 管理 <span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">Swing</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
					</ul></li>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 工具 <span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">Swing</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
					</ul>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 系统<span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
    <div class="body-container">
        <div class="body-container2">
            <div class="body-container3 easyui-tabs">
                <div title="工时填报" class="div-tab">

                    <div id="date-div">
                        <strong><span style="font-family:微软雅黑;color:red">填报日期:&nbsp</span></strong><input type="date" class="inp-date" id="inp-date">
                    </div>
                    <table class="grid_table" id="tab">
                        <thead class="tab_header">
                        <tr>
                            <th>项目代码</th>
                            <th>项目名称</th>
                            <th class="td-status">状态</th>
                            <th>工作时间</th>
                        <tr>
                        </thead>
                        <tbody>
                        <c:forEach var="p" items="${projects}">
                        <tr>
                            <td><c:out value="${p.projectId}" /></td>
                            <td><c:out value="${p.projectName}" /></td>
                            <td class="td-status"><input type="checkbox"></td>
                            <td><input class="form-control" type="number" placeholder="工作时间" disabled="true"></td>
                        </tr>
                        </c:forEach>
                        <tr>
                            <td colspan="3">总和</td>
                            <td></td>
                        </tr>
                        </tfoot>
                    </table>
                    <button type="button" class="btn btn-info">提交</button>
                </div>
                <div title="工时查询" class="div-tab">
                    <div>

                    </div>
                </div>
                <div title="新增项目" class="div-tab">

                    <form:form modelAttribute="newProject">
                        <table>
                            <tr>
                                <td>
                                    <span>项目代码</span>
                                </td>
                                <td>
                                    <form:input path="projectId"/>
                                </td>
                            </tr>
                            <tr>
                                <td>项目名称</td>
                                <td>
                                    <form:input path="projectName"/>
                                </td>
                            </tr>
                            <tr>
                                <td>项目类别</td>
                                <td>
                                    <form:select path="type">
                                        <c:forEach items="${projectTypes}" var="item">
                                            <form:option value="${item.value}">
                                                <c:out value="${item.value}"/>
                                            </form:option>
                                        </c:forEach>
                                    </form:select>

                                    <input type="button" value="确定" id="addProjectBtn">
                                    <script>
                                        $("#addProjectBtn").click(function(){
                                            alert("ajax-addProject");
                                            var projectId = $("#projectId").val();
                                            var projectName = $("#projectName").val();
                                            var projectType = $("#type").val();

                                            $.post("<%=basePath%>project/addProject.do",{
                                                'projectId': projectId
                                                ,'projectName': projectName
                                                ,'typeStr' : projectType
                                            },
                                            function(data) {
                                                alert(data);
                                            },
                                            "text");

                                        })
                                    </script>
                                </td>
                            </tr>
                        </table>
                    </form:form>

                </div>
                <div title="编辑项目" class="div-tab">

                </div>
            </div>
        </div>
    </div>

</body>
</html>